<template>
  <view class="myPage">
    <u-navbar
      bgColor="transparent"
      autoBack
      :bgColor="bgColor"
      :leftIconColor="leftIconColor"
      title="概览介绍"
    >
      <!--          <view class="u-nav-slot" slot="center" style="font-weight: 500">-->
      <!--              概览介绍-->
      <!--          </view>-->
    </u-navbar>
    <view class="container">
      <image class="top-img" :src="img_api + detail.imgPath"></image>
      <view class="details">
        <view class="title">{{ detail.title }}</view>
        <view class="position" v-if="detail.latitude && detail.longitude">
          <view class="left">
            <text>交通指南</text>
            <text>多种交通方式直达景区</text>
          </view>
          <view class="right" @click="goToMap">
            <image
              src="https://ltjt.sjzballsportpark.com/statics/tyc/static/introduction-detail-position-location.png"
            ></image>
            <text>查看</text>
          </view>
        </view>
        <view class="discription">
          <u-parse :content="detail.articleText || ''" :tagStyle="parseStyle"></u-parse>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getNoticeDetail } from "@/config/api.js";
export default {
  data() {
    return {
      scrollTop: 0,
      detail: {},
    };
  },
  computed: {
    bgColor() {
      return this.scrollTop > 100 ? "#ffffff" : "transparent";
    },
    leftIconColor() {
      return this.scrollTop > 100 ? "#303133" : "#303133";
    },
  },

  onLoad: function (options) {
    const id = options.id || 1;
    if (id) {
      this.id = id;
      this.getDetail();
    }
    if (options.from === "guide_detail") {
      uni.setNavigationBarTitle({
        title: "景点详情",
      });
    }
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  methods: {
    getDetail() {
      getNoticeDetail({ _id: this.id })
        .then((res) => {
          console.log("getDetail====", res);
          if (res.code === 200) {
            this.detail = res.data || {};
          }
        })
        .catch((err) => console.log("错误了", err));
    },
    goToMap() {
      const detail = this.detail;
      uni.openLocation({
        latitude: Number(detail.latitude),
        longitude: Number(detail.longitude),
        name: detail.placeName || detail.title,
        address: detail.placeName || detail.introduction,
        success: function () {
          console.log("success");
        },
        fail: function (res) {
          console.log("fail", res);
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.myPage {
  height: 100%;
  width: 100%;
  position: relative;
  .container {
    height: 100%;
    width: 100%;
    .top-img {
      height: 480rpx;
      width: 100%;
    }
    .details {
      position: relative;
      top: 0rpx;
      height: auto;
      background: #ffffff;
      border-radius: 40rpx 40rpx 0rpx 0rpx;
      padding: 0rpx 0 32rpx;
      .title {
        display: inline-block;
        font-size: 40rpx;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.9);
        line-height: 56rpx;
        width: calc(100% - 0rpx);
        padding: 32rpx;
        border-bottom: 1px solid #e5e5e5;
        // margin: 48rpx 0;
      }
      .position {
        width: 670rpx;
        height: 120rpx;
        background-size: 100% 100%;
        background: url("https://ltjt.sjzballsportpark.com/statics/tyc/static/introduction-detail-position-bg.png")
          no-repeat;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        .left {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
          margin-left: 24rpx;
          text:first-child {
            font-size: 32rpx;
            font-weight: 600;
            color: #5f6f86;
            line-height: 48rpx;
            margin-bottom: 8rpx;
          }
          text:last-child {
            font-size: 24rpx;
            font-weight: 400;
            color: #777f8f;
            line-height: 32rpx;
          }
        }
        .right {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          margin-right: 32rpx;
          width: 144rpx;
          height: 64rpx;
          background: #ffffff;
          box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
          border-radius: 32rpx 32rpx 32rpx 32rpx;
          image {
            height: 32rpx;
            width: 32rpx;
            margin-right: 8rpx;
          }
          text {
            font-size: 28rpx;
            font-weight: 400;
            color: #2187ff;
            line-height: 32rpx;
          }
        }
      }
      .discription {
        width: 100%;
        height: auto;
        margin: 40rpx 0;
        padding: 0 32rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.7);
        text-align: justify;
        line-height: 1.5;
      }
    }
  }
}
</style>
